<template>
<!-- 在template中 ，只能存在一个跟组件 -->
    <div>
        <ul>
            <li v-on:click.prevent="getItemInfo(index,$event)" v-for="(name,index) in names" :key="index">{{name}}</li>
        </ul>
        <input type="text" v-on:keyup.enter="getkeyInfo">
        <button @click="pushArr">按钮</button>
        <button v-on:click="getOdd">我要奇数</button>
        <p>{{msgRe}}</p>
        <p>{{msgRe}}</p>
    </div>
</template>
<script>
export default{
    name:"Event",
    //data中的数据改变，会引起视图的变化 MVVM
    data(){
        return{
            names:["dd","fd","reer"],
            nums:[1,2,3,4,5,6,7,8,9],
            message:"zhaoye"
        }
    },
    methods:{
        //事件中的默认参数event
        getItemInfo(data,event){          
            console.log(this.names[data])
            console.log(data)
            console.log(event)
        },
        //键盘事件
        getkeyInfo(event){
            console.log(event)
        },
        pushArr(){
            this.names.push("haha")
        },
        getOdd(){
            this.nums.filter(function(nums){
                if(nums%2 !== 0){
                    console.log(nums)
                }
                // console.log(nums%2 !== 0)
                return  nums%2 !== 0
            })
        }
    },
    computed:{
        msgRe(){
            return this.message.split('').reverse().join('')
        }
    }
}
</script>
<style scoped>

</style>